<template>
  <div class="width-style">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content">
          <!-- 新闻推送板块 -->
          <NewsSection :newsList="$store.state.home.newsList" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <!-- 轮播图 -->
          <Carousel :categoryList="$store.state.home.newsList" />
          <!-- 推荐文章列表 -->
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <HottestShow :catagoryList="$store.state.home.hottestShow" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <ConcernedShow
                  :catagoryList="$store.state.home.concernedShow"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <!-- 下载中心 -->
          <Download />
        </div>
        <!-- 滚动播放 -->
        <Scroll :list="userWriteList" />
      </el-col>
    </el-row>
    <!-- <div class="advertising">广告位</div> -->
    <el-row :gutter="20">
      <el-col :span="9">
        <div class="grid-content">
          <Medical
            moduleName="现代医学"
            :GList="modernGList"
            :DList="modernDList"
            :TList="modernTList"
            :NList="modernNList"
          />
        </div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content">
          <Medical
            moduleName="传统医学"
            :GList="traGList"
            :DList="traDList"
            :TList="traTList"
            :NList="traNList"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <!-- 专家栏 -->
          <HomeAdviser :allDoctorList="$store.state.home.allDoctorList" />
        </div>
      </el-col>
    </el-row>
    <el-row class="border-traditional-covid">
      <el-col :span="12">
        <div class="grid-content">
          <HomeBreathe />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <HomeTraditional />
        </div>
      </el-col>
    </el-row>
    <el-row class="border-traditional-covid">
      <el-col :span="12">
        <div class="grid-content">
          <HomeCovid />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <HomeLeading :list="leadingList" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewsSection from "@/components/newsSection.vue";
// import NewsSection from "../../components/newsSection.vue";
import Banner from "@/components/banner.vue";
import Medical from "@/components/medical.vue";
import HomeAdviser from "@/components/homeAdviser.vue";
import Scroll from "@/components/scroll.vue";
import HomeBreathe from "@/components/homebreathe.vue";
import HomeTraditional from "@/components/homeTraditional.vue";
import HomeLeading from "@/components/homeLeading.vue";
import HomeCovid from "@/components/homeCovid.vue";
import Carousel from "@/components/carousel.vue";
import Download from "@/components/download.vue";
import HottestShow from "@/components/hottestShow.vue";
import ConcernedShow from "@/components/concernedShow.vue";
import { renderTime } from "@/utils/tools.js";
export default {
  name: "Home",
  layout: "homeLayout",
  components: {
    NewsSection,
    Banner,
    Medical,
    HomeAdviser,
    Scroll,
    HomeBreathe,
    HomeTraditional,
    HomeLeading,
    HomeCovid,
    Carousel,
    Download,
    HottestShow,
    ConcernedShow,
  },
  data() {
    return {
      isLogin: false,
      news: [],
    };
  },
  async asyncData({ app, store }) {
    // console.log('我是asyncData');
    // 获取最热列表
    let hottestRes = await app.api.reqCoreGeneralByLikes();
    if (hottestRes.code === 200) {
      store.commit("home/SETHOTTEST", hottestRes.rows);
    }
    //获取最关心列表
    let concernRes = await app.api.reqCoreGeneralByHits();
    if (concernRes.code === 200) {
      store.commit("home/SETCONCERN", concernRes.rows);
    }
    //获取新闻列表
    let newsRes = await app.api.reqNews();
    if (newsRes.code === 200) {
      //更改数组中的时间格式，图片地址
      for (let item of newsRes.rows) {
        item.publishTime = renderTime(item.publishTime);
        item.thumbnail = app.api.BASEURL + item.thumbnail;
      }
      store.commit("home/SETNEWSLIST", newsRes.rows);
    }
    //获取医生等列表
    let doctorRes = await app.api.reqAllDoctor();
    // console.log(doctorRes);
    if (doctorRes.code === 200) {
      for (let doctor of doctorRes.rows) {
        doctor.doctorAvatar = app.api.BASEURL + doctor.doctorAvatar;
      }
      store.commit("home/SETDOCTORLIST", doctorRes.rows);
    }
    // console.log('医生列表',doctorRes);
    //获取修改页面的用户信息列表
    let userWriteRes = await app.api.reqUserWriteList(0);
    let userWriteList;
    if (userWriteRes.code === 200) {
      userWriteList = userWriteRes.rows;
    }
    // 获取现代医学篇列表
    let modernGRes = await app.api.reqCoreGeneralByPage(58,1,7);
    let modernGList;
    if (modernGRes.code === 200) {
      modernGList = modernGRes.rows;
    }
    // console.log("我是现代医学篇", modernGList);
    let modernDRes = await app.api.reqCoreGeneralByPage(62,1,7);
    let modernDList;
    if (modernDRes.code === 200) {
      modernDList = modernDRes.rows;
    }
    let modernTRes = await app.api.reqCoreGeneralByPage(67,1,7);
    let modernTList;
    if (modernTRes.code === 200) {
      modernTList = modernTRes.rows;
    }
    let modernNRes = await app.api.reqCoreGeneralByPage(20,1,7);
    let modernNList;
    if (modernNRes.code === 200) {
      modernNList = modernNRes.rows;
    }
    //获取传统医学篇列表
    let traGRes = await app.api.reqCoreGeneralByPage(71,1,7);
    let traGList;
    if (traGRes.code === 200) {
      traGList = traGRes.rows;
    }
    let traDRes = await app.api.reqCoreGeneralByPage(73,1,7);
    let traDList;
    if (traDRes.code === 200) {
      traDList = traDRes.rows;
    }
    let traTRes = await app.api.reqCoreGeneralByPage(78,1,7);
    let traTList;
    if (traTRes.code === 200) {
      traTList = traTRes.rows;
    }
    let traNRes = await app.api.reqCoreGeneralByPage(84,1,7);
    let traNList;
    if (traNRes.code === 200) {
      traNList = traNRes.rows;
    }
    // 获取医学前沿列表
    let leadingRes = await app.api.reqCoreGeneralByPage(44);
    // console.log(leadingRes);
    let leadingList;
    if (leadingRes.code === 200) {
      leadingList = leadingRes.rows;
    }
    // console.log('医学前沿',leadList);
    return {
      userWriteList,
      leadingList,
      modernGList,
      modernDList,
      modernTList,
      modernNList,
      traGList,
      traDList,
      traTList,
      traNList,
    };
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.advertising {
  height: 50px;
  background-color: #f2f2f2;
  line-height: 50px;
}
.border-traditional-covid {
  border-top: 1px dashed #d7d7d7;
}
</style>
